<template>
  <section class="nav-container">
    <section class="nav-content">
      <section class="nav-info">
        <span class="title">{{ props.title }}</span>
        <section class="keywords-wrapper">
          <span class="keywords" v-for="word in props.keywords?.split(';') || []">{{ word }}</span>
        </section>
      </section>
      <section class="nav-options">
        <span class="options-item" v-for="option in props.options">{{ option }}</span>
      </section>
    </section>
  </section>
</template>
<script setup lang="ts">
let props = defineProps({
  title: String,
  keywords: String as any,
  options: Array,
});
</script>
<style scoped>
.nav-container {
  border-top: 2px solid #18a058aa;
  box-shadow: 0 5px 5px #3f3f3f17;
  background-color: #fff;
  height: 60px;
}

.nav-content {
  width: 1226px;
  min-width: 1226px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.nav-info {
  display: flex;
  align-items: center;
}

.title {
  margin: 0;
  font-size: 22px;
  font-weight: 200;
  color: #333;
}

.keywords-wrapper {
  color: #3f3f3f;
  margin-left: 15px;
  margin-top: 5px;
  font-weight: 500;
}

.keywords {
  font-size: 15px;
}
.keywords + .keywords:before {
  content: "|";
  margin: 0 3px;
}

.nav-options {
  display: flex;
}

.options-item {
  margin-right: 6px;
  transition: 0.3s ease all;
}

.options-item:hover {
  color: #18a058;
  cursor: pointer;
}

.options-item + .options-item::before {
  content: "|";
  margin-right: 6px;
  color: #333;
}
</style>